<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>新闻</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <div th:replace="header :: header" ></div>
</head>
<body>
<div class="ui container">
    <div th:replace="menu :: menu"></div>
    <div class="ui grid">
        <div class="twelve wide column">

            <div class="ui raised segment items">
                <div class="item" th:if="${err}">
                    <div class="content" th:text="${err}"></div>
                </div>
                <div class="item" th:if="${news}">
                    <div class="ui content">
                        <h1 class="ui header" th:text="${news.title}"></h1>
                        <div class="ui text">
                            <textarea id="text-input" oninput=""
                                      rows="20" cols="60" name="article"  th:text="${news.article}" style="display: none"></textarea>
                            <p id="preview"></p>
                        </div>
                        <script src="/static/md/markdown.js"></script>
                        <script>
                            function Editor(input, preview) {
                                this.update = function () {
                                    preview.innerHTML = markdown.toHTML(input.value);
                                };
                                input.editor = this;
                                this.update();
                            }
                            var $$ = function (id) { return document.getElementById(id); };
                            new Editor($$("text-input"), $$("preview"));
                        </script>
                        <div class="meta">
                            <a href="">
                                <i class="user icon"></i>
                                <span th:text="${news.author}"></span>
                            </a>
                            <a href="">
                                <i class="like icon"></i>
                                <span th:text="${news.like}"></span>
                            </a>
                            <a th:if="${currUser} and (${news.author} == ${currUser.username} or ${currUser.userType.hasAdminAuth()})"
                               th:href="'/news/edit/'+${news.id}">
                                <i class="edit icon" ></i>
                                <span>编辑</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ui raised segment items">
                <div th:replace="comments :: comments">
                </div>
            </div>

            <div class="ui raised segment items">
                <h3 class="ui dividing header">添加评论</h3>
                <div th:replace="comments :: addComment">
                </div>
            </div>
        </div>
        <div class="four wide column">

            <div th:replace="mycard :: mycard"></div>

        </div>
    </div>


    <div th:replace="footer :: footer"></div>
</div>
</body>
</html>